<template>
    <div id="iLogs">
        <transition name="fade">
        <div v-if="show" class="modify">
            <div class="modifyContainer">
                <div style="position:relative;top:-2.6vw;text-align:center">
                    <span style="padding:1vw 0 0 0;font-size:1.4vw;color:#4a4a4a">修改密码</span>
                    <img v-on:click="show = !show"  src="../assets/closeDark.png" style="cursor:pointer;position:absolute;right:1vw;top:0vw;width:1.3vw;height:1.3vw">
                </div>
                <div style="height:14vw">
                    <div class="left">
                        <div >账号</div>
                        <div >旧密码</div>
                        <div >新密码</div>
                        <div >确认密码</div>
                    </div>
                    <div class="right">
                        <input style="margin:0 0 1.1vw 0 ;box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;padding:0.4vw;font-size:1.2vw;width:85%;background:white;border:none;outline:none;"  v-model="userID" placeholder="学号/工号">
                        <input style="margin:0 0 1.1vw 0 ;box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;padding:0.4vw;font-size:1.2vw;width:85%;background:white;border:none;outline:none;"  v-model="passWord" placeholder="">
                        <input style="margin:0 0 1.1vw 0 ;box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;padding:0.4vw;font-size:1.2vw;width:85%;background:white;border:none;outline:none;"  v-model="N_passWord" placeholder="">
                        <input style="margin:0 0 1.1vw 0 ;box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;padding:0.4vw;font-size:1.2vw;width:85%;background:white;border:none;outline:none;"  v-model="re_passWord" placeholder="">
                    </div>
                </div>
                <div class="btn">
                    <el-button type="primary" class="comfirm" @click="changePw">确认修改</el-button>
                </div>
            </div>
        </div>
        </transition>
        <el-row>
            <el-col :span="10">
                <div>
                    <div style="position:relative;width:1.0vw;background:#898989;height:4vw;margin-left:3vw"></div>
                    <div style="position:absolute;top:1.5vw;left:5vw;font-size: 1.2vw">THIS IS A ASSIGHNMENT MANAGEMENT SYSTEM</div>
                </div>
                <div class="ibody">
                    <div class="head">登陆入口</div>
                    <div class="body">
                        <div style="width:45%;float:left;margin-bottom:0.4vw">
                             <span style="font-size:01vw;padding:0 0 0 0.5vw">账号</span>
                             <input style="box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;margin:0.3vw 0 0 0;padding:0.4vw;font-size:1vw;width:80%;background:white;border:none;outline:none;"  v-model="userID" placeholder="学号/工号">
                        </div>
                        <div style="width:55%;top:0;float:left;margin-bottom:0.4vw">
                             <span style="font-size:01vw;padding:0 0 0 0.8vw">密码</span>
                             <input style="box-shadow:0vw 0vw 0.5vw rgba(0,0,0,0.2) inset;margin:0.3vw;padding:0.4vw;font-size:1vw;width:82%;background:white;border:none;outline:none;" type="password" v-model="passWord" placeholder="密码">
                        </div>
                    </div>
                         <!---->
                         <div style="width:85%;margin:0 0 0 9%">
                             <img class="warnIcon">
                             <span style="font-size:0.8vw;color:#898989">
                                初始密码为身份证后6位数，点击
                             <span v-on:click="show = !show" style="text-decoration:underline;padding:0 0 0 0.2vw;color:#ea9200;cursor:pointer"  >修改密码</span>
                             </span>
                         </div>
                         <div style="width:100%;margin-top:vw;position:relative" class="logBtn">
                             <el-checkbox style="margin:0 0 0 2vw;padding:0 0 1.5vw 0 " v-model="checked">记住账号</el-checkbox>
                             <el-button style="position:absolute;top:0.5vw;right:2.5vw" plain  @click="toLogin">登录</el-button>
                         </div>
                </div>
                <div class="rnt">
                    <div class="r">
                        <p style="font-size:1.6vw">RULES</p>
                        <div style="font-size:1vw">blahblahblahblahb</div>
                        <div style="font-size:1vw">blahblahblahblah</div>
                        <div style="font-size:1vw">blahblahblah</div>
                        <div style="font-size:0.5vw;margin-top:1vw">1.blahblahbl</div>
                        <div style="font-size:0.5vw;">2.blahblahblah</div>
                        <div style="font-size:0.5vw;">3.blah</div>
                    </div>
                    <div class="t">
                        <p style="font-size:1.5vw">TIPS</p>
                        <div style="font-size:1vw">blahblahblahblahb</div>
                        <div style="font-size:1vw">blahblahblahblah</div>
                        <div style="font-size:1vw">blahblahblah</div>
                        <div style="font-size:0.5vw;margin-top:1vw">1.blahblahbl</div>
                        <div style="font-size:0.5vw;">2.blahblahblah</div>
                        <div style="font-size:0.5vw;">3.blah</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="14">
                <img src="../assets/login.png">
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        data() {
            return {
              show:false,
              tip:'欢迎访问作业系统',
              userID:'',
              passWord:'',
              N_passWord:'',
              re_passWord:'',
              checked:false,
            }
        },
        methods: {
            toLogin(){
                 var params = new URLSearchParams();
                params.append('userID',this.userID);
                params.append('password',this.passWord );
                var _this = this
                 axios.post('/users/signin',params).then(function (res) {
                    if(res.data.stauts=='success') {
                        localStorage.userID = _this.userID;//浏览器储存用户ID
                        localStorage.userName = res.data.signin_user.userName;
                        localStorage.itRoot = res.data.signin_user.root;
                        // console.log(res.data.signin_user.userName);
                        console.log(localStorage);
                      _this.$message({
                        message:'登陆成功',
                        type:'success'
                      });
                      //用户权限判断（老师，学生，管理员）
                      var itRoot = res.data.signin_user.root;
                      if(itRoot==2){
                          _this.$router.push({path:'/teacher'});
                      }else if(itRoot==4){
                          _this.$router.push({path:'/student'});
                      }else{
                         _this.$router.push({path:'/home'});
                      };
                   }else {
                      _this.$message({
                        message:'密码或账号错误',
                        type:'warning'
                      });
                   }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            tochangePw(){
                 this.$router.push({path:'/changepassword'});
            },
            //修改密码
            changePw(){
                if(this.N_passWord!==""&&this.re_passWord==this.N_passWord){
                    var params = new URLSearchParams();
                    params.append('userID',this.userID);
                    params.append('password',this.passWord );
                    params.append('newPassword',this.N_passWord );
                    var _this = this
                    axios.post('/users/resetPW',params).then(function (res) {
                        if(res.data.stauts=='success') {
                            _this.show=false;
                            _this.$message({
                                    message:'修改密码成功，请重新登陆。',
                                    type:'success'
                            });
                        }else {
                            alert(res.data.msg)
                        }
                    }).catch(function (err) {
                        console.log(err);
                    })
                }else{
                    this.$message({
                        message:'请确保两次输入密码一致并且不为空',
                        type:'warning'
                    });
                }

            }
        }
    }
</script>
<style>
    #iLogs{
        background-color: #e9e9e9;
        height:100vh;
    }
    #iLogs .ibody{
        margin:10vw 0 0 4vw;
        width: 25vw;
        background-color: #d2d2d2;
        box-shadow:5px 5px 18px rgba(0,0,0,0.4);
    }
    #iLogs .ibody .head{
        box-shadow:0px 5px 10px rgba(0,0,0,0.5);
        padding: 0.4vw 0 0.4vw 0;
        font-size: 1.4vw;
        background: #898989;
        text-align: center;
    }
     #iLogs .ibody .body{
         margin:1.5vw 0 0 2vw;
    }
    #iLogs .ibody .bottom{
         margin:10vw 0 0 2vw;
         background: red
    }
    .el-checkbox__label{
        font-size: 0.5vw
    }
    .warnIcon {
        width: 1vw;
        height: 1vw;
        background: #ea9200;
    }
   #iLogs .logBtn .el-button{
       padding:0.3vw 0.5vw;
       font-size: 0.8vw;
       background-color: #d2d2d2;
       box-shadow:0vw 0.5vw 01vw rgba(255,255,255,01) inset;
   }
   #iLogs .rnt{
       color:#606060;
       position: relative;
       width: 100%;
       padding-left:4vw;
       padding-top:3vw
   }
   #iLogs .rnt div{
       width: 50%;
   }
   #iLogs .rnt .r{
       width:12vw;
       height: 14vw;
       border-right: 0.15vw solid #606060
   }
   #iLogs .rnt .t{
       position: absolute;
       top:3.5vw;
       left: 18vw;
   }
   #iLogs .modify{
       position: fixed;
       background:rgba(0,0,0,0.7);
       width: 100%;
       height: 100%;
       z-index: 1001;
       top: 0;
       left: 0;
   }
 #iLogs .modifyContainer{
       background:#d2d2d2;
       width: 25vw;
       border-radius: 0.6vw;
       margin: 8vw auto 0 auto;
       padding: 3.5vw 0 2vw 0px;
   }
   #iLogs .modifyContainer .left{
       float: left;
       width: 26%;
       text-align: right;
       font-size: 1.2vw;
       padding: 0 1.0vw 0 0;
       color: #606060;
       height: 10%
   }
    #iLogs .modifyContainer .left div{
        margin:0.3vw 0 1.2vw 0 ;
        padding: 0 0 0.5vw 0;
    }
   #iLogs .modifyContainer .right{
       float: left;
       width: 64%;
       padding: 0;
       line-height: 1vw
   }
   #iLogs .modifyContainer .btn{
       text-align: center;
   }
   #iLogs .modifyContainer .el-button{
       padding:0.5vw 0.5vw;
       font-size: 1.5vw;
   }
    #iLogs .modifyContainer .comfirm{
        width: 75%
    }
    #iLogs .modifyContainer .cancel{
        width: 30%
    }
    .el-button+.el-button{
        margin-left:0
    }
    .fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
